<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            font-size: 30px;
            color: #fff;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left, .right {
            width:60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;

            left: 20px;

        }
        .right {
            background-color: #F35336;

            right: 20px;

        }
        .main {
            margin-top: 130px;
        }
    </style>

</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam aperiam assumenda autem commodi
        delectus deleniti dignissimos ea et molestias necessitatibus nihil officiis quam quas, qui repellat tempore
        ullam veritatis.
    </div>
    <div>Ad asperiores assumenda beatae corporis cum distinctio ducimus esse, et, expedita explicabo laudantium
        molestias, mollitia odio officiis repellendus sed sint. Consequatur, ipsum, sapiente. Autem deleniti itaque
        molestiae molestias voluptas? Fugiat!
    </div>
    <div>Accusamus adipisci alias, cum dolores exercitationem in magni molestiae nulla officia quam qui reiciendis
        repellendus temporibus veritatis voluptas. Ex fuga id in iste provident quaerat quia ratione rem vel veritatis!
    </div>
    <div>Aut commodi, consequatur enim impedit in magni nulla quas. Doloribus illum quisquam vel voluptatum. Alias
        corporis deleniti deserunt doloremque doloribus dolorum eaque harum impedit ipsam labore laborum, odit quos
        voluptate?
    </div>
    <div>Amet autem et ex inventore ipsam laboriosam magni maiores mollitia, nostrum officia pariatur unde veniam
        voluptatem? Eius illum praesentium reiciendis reprehenderit? Consequuntur dignissimos eum iste nam quasi
        reiciendis soluta unde?
    </div>
    <div>Ab accusamus alias animi blanditiis distinctio hic id illum iure magnam nemo, nisi nobis possimus quas quis
        repellat, sequi sit, sunt tempora unde voluptate! Dolore libero pariatur praesentium vel velit?
    </div>
    <div>Alias aperiam at dolorem, non quam sequi? At dolor doloremque id ipsa, maxime quia voluptatibus voluptatum?
        Animi aperiam delectus, illo incidunt ipsam qui quidem quo. At doloremque maiores molestiae quisquam?
    </div>
    <div>Dicta eveniet harum id nesciunt quasi repellat rerum? Amet assumenda consequuntur debitis deleniti dolor
        dolorum error facilis ipsa iusto nemo obcaecati perferendis repellat rerum, sapiente sint temporibus veniam,
        vitae, voluptatem.
    </div>
    <div>Aspernatur consequatur in iure molestiae porro quasi quia quisquam repellat ullam! Aliquam amet assumenda eius
        eligendi error, esse exercitationem, ipsa itaque iusto neque porro possimus provident repellat repudiandae
        soluta ullam.
    </div>
    <div>Accusantium aperiam asperiores commodi cupiditate, debitis dicta distinctio eius explicabo illo ipsa ipsum
        labore magnam maxime molestiae mollitia natus odit pariatur qui quibusdam quo ratione reprehenderit rerum
        tenetur ullam veritatis?
    </div>
    <div>Accusamus architecto consequuntur cum eos esse laborum ullam vero voluptate? Culpa debitis dolor, excepturi
        harum perspiciatis provident voluptas? Cupiditate dolore error fugit laboriosam maxime molestiae necessitatibus
        quasi quidem reiciendis vel.
    </div>
    <div>Consequatur corporis cumque esse magni voluptatibus. Aperiam, asperiores commodi dolorem eligendi facilis nulla
        odit possimus praesentium repudiandae tempora? Dolores dolorum, esse ipsum iure magnam maiores nisi possimus
        praesentium quae veritatis.
    </div>
    <div>Accusamus aliquam aperiam blanditiis dignissimos dolorum facilis illum minima, minus quis quisquam repellat
        ullam voluptatem! Doloribus ea eveniet neque nihil sint suscipit voluptatem voluptatibus. Beatae iure natus
        nihil ratione vel!
    </div>
    <div>Ab accusantium corporis, fugiat hic provident repudiandae unde! Architecto, assumenda cupiditate deserunt
        dolorum ea illum incidunt inventore ipsa magnam maiores non nulla omnis optio perferendis perspiciatis quisquam
        reiciendis tenetur vitae?
    </div>
    <div>Assumenda culpa debitis exercitationem expedita, inventore iste possimus repellat! Cupiditate dignissimos earum
        et eveniet exercitationem, minus quod soluta totam veritatis voluptas. Ab amet earum eius fugiat, hic inventore
        nemo unde.
    </div>
    <div>At corporis distinctio eius esse nisi, quis quod? Accusamus at, consectetur culpa debitis doloremque eaque
        eveniet facere iusto maxime repudiandae sint veritatis voluptatum? Atque aut beatae, deleniti natus quia
        voluptatibus.
    </div>
    <div>Ab asperiores consequuntur cumque ex exercitationem expedita explicabo ipsa mollitia, nemo, nisi placeat,
        quaerat quia repellendus ut vel. Ab aspernatur cumque facere inventore quis! Debitis labore quia rem sed unde?
    </div>
    <div>A accusamus adipisci commodi debitis ea earum, enim ex perspiciatis, quasi quidem recusandae repellendus
        voluptates, voluptatum. Accusamus ad aspernatur dignissimos est fugiat maxime nihil omnis soluta, sunt unde ut
        velit.
    </div>
    <div>Aliquid aspernatur dicta dolores ea, excepturi expedita fugit itaque iure laborum nisi obcaecati odio optio
        pariatur perferendis quibusdam repellat tenetur? Alias blanditiis deserunt earum in nihil possimus quidem
        repellendus similique!
    </div>
    <div>Cumque deleniti dolor ducimus ea nihil quam quasi, quia quisquam sit soluta tempora, totam velit. A culpa
        deserunt ducimus eaque labore mollitia natus possimus repellendus, rerum sunt tempora, vel veniam.
    </div>
    <div>Ab ad architecto asperiores, consectetur cum error eum, iure labore maiores natus nisi nostrum pariatur
        perferendis provident tenetur velit, veniam voluptatum. Dolores eveniet numquam odio totam voluptatibus!
        Asperiores, odit, sequi!
    </div>
    <div>Et fuga recusandae totam ullam! Adipisci, amet eius labore natus nihil reiciendis similique. Cupiditate fuga
        maxime nostrum officia possimus quod reprehenderit repudiandae tenetur totam voluptas? Alias ducimus tempora
        voluptates. Modi.
    </div>
    <div>Accusamus cumque cupiditate deleniti error, exercitationem id illo ipsum laboriosam laborum necessitatibus nemo
        quae repellendus similique soluta tempore tenetur velit voluptate? A consectetur cupiditate eaque error, nihil
        obcaecati qui sint?
    </div>
    <div>Aliquam aut delectus eaque esse facilis, fugit maiores nostrum quo recusandae reiciendis sed, tempora.
        Asperiores aut autem blanditiis commodi dolorem doloribus eius est expedita, explicabo quia sed sunt veritatis
        voluptate.
    </div>
    <div>Ad blanditiis eaque eos, eveniet hic illo laboriosam magnam maiores, optio quasi reprehenderit, voluptas?
        Accusantium beatae consectetur dignissimos, doloremque eos, eveniet fugit iure nobis nulla omnis placeat quam
        sapiente tempora!
    </div>
    <div>Animi atque commodi cum distinctio dolor, doloremque ducimus eaque earum et expedita fuga harum maxime nam
        neque, nobis non numquam odio officia perferendis praesentium qui reiciendis saepe tempora veniam voluptatum?
    </div>
    <div>Asperiores blanditiis, distinctio eaque et itaque magnam necessitatibus saepe soluta voluptatem? Expedita ipsa
        laborum modi quam qui sit? Aliquam distinctio doloribus fugiat optio, quibusdam temporibus! Ad atque cum porro
        vitae?
    </div>
    <div>Atque aut eos eum ex explicabo fugiat harum hic, nam nobis officiis optio placeat provident quisquam suscipit
        vel velit veniam voluptatem voluptatibus? Accusamus incidunt nulla pariatur quia voluptas. Error, rem.
    </div>
    <div>Commodi cum, et eveniet exercitationem impedit mollitia provident qui suscipit unde voluptatum! Accusantium
        culpa, ea labore minus necessitatibus obcaecati officia omnis provident quam ratione totam ut vel velit vero
        voluptates?
    </div>
    <div>Atque beatae deserunt dolor eius enim excepturi expedita explicabo fugit, labore maiores molestiae odio
        praesentium quo, recusandae reiciendis, ut voluptatum? Aspernatur atque commodi corporis, deleniti dicta ipsam
        molestias rerum sequi.
    </div>
    <div>Aliquam animi consequatur consequuntur doloremque explicabo hic incidunt ipsa iste minus mollitia obcaecati
        odio omnis, quae, quidem quos reprehenderit similique sit, tempore veritatis voluptas. Beatae eos et iste quas
        voluptatem?
    </div>
    <div>Accusantium aliquam dolore eum exercitationem, expedita facere illum iste magni maiores maxime mollitia, natus
        nesciunt officiis optio quis, quod sit tempore tenetur ut voluptate! Consequuntur doloremque molestiae nisi quod
        soluta.
    </div>
    <div>Ab beatae eius facere neque possimus quas quasi rem, voluptatum! A, accusantium aliquam blanditiis commodi
        consectetur doloribus eaque explicabo fugit minus mollitia, odit, optio perspiciatis quas sed sit temporibus
        voluptatum?
    </div>
    <div>Amet, animi blanditiis deserunt doloribus eius enim error eveniet fugit iure laborum nisi odio officia officiis
        quis sint, sunt velit voluptatem. Doloremque esse harum tempore? Cumque dolor quidem saepe totam.
    </div>
    <div>Accusamus commodi delectus eos, ipsa iure magni mollitia, nam nostrum odit officiis, placeat similique sunt
        vel. Amet cum debitis dolorem, excepturi ipsa optio porro quia recusandae reiciendis sit tempore velit!
    </div>
    <div>Aut autem consectetur cumque deserunt, doloremque eaque et eum in nihil nobis numquam quis tenetur velit! Culpa
        cupiditate dolorem eligendi eveniet quam quasi quod reiciendis sed. Qui rerum sed tempora?
    </div>
    <div>Accusantium debitis labore omnis similique voluptatibus? Ad aliquam amet beatae commodi culpa deserunt eaque
        eligendi eveniet, ipsa laboriosam laudantium natus officia optio, quam quidem quos reprehenderit vel velit
        voluptatem voluptates.
    </div>
    <div>Adipisci aliquam aperiam asperiores dolor fuga inventore iure iusto nesciunt, perspiciatis possimus quia
        repellendus saepe, sapiente, sed totam voluptate voluptatem. Autem deleniti distinctio doloribus eaque, laborum
        officia suscipit tempore voluptatibus.
    </div>
    <div>Accusantium atque blanditiis dolore dolorem eaque, hic nam necessitatibus numquam perspiciatis, quod rerum sed
        similique tempore? Aspernatur aut consequuntur dolore eaque, earum eius enim esse iusto mollitia pariatur,
        ratione sequi.
    </div>
    <div>Ab culpa cum ea non numquam rem repellendus sed. At dicta eius illum maxime neque officiis quia quibusdam
        quisquam quo ratione sequi, sint sunt voluptates. At consequatur doloremque nam similique?
    </div>
    <div>Cumque facere libero modi nisi possimus qui. Adipisci alias beatae consequuntur culpa eius, eum fugit ipsam,
        iure, maiores nesciunt nobis obcaecati odit porro quod tempore? Mollitia non reiciendis repudiandae temporibus?
    </div>
    <div>Alias, consequatur consequuntur cumque cupiditate, dignissimos eius eligendi error eum fuga fugit ipsum magnam
        natus nihil, nobis nulla officia perspiciatis praesentium quaerat quas quasi quod quos repellendus sint suscipit
        vero.
    </div>
    <div>Architecto, doloribus eligendi, et, exercitationem fugit id mollitia neque non placeat quod similique ut!
        Aliquam aliquid autem commodi cupiditate magni necessitatibus, obcaecati optio perspiciatis quaerat tempora
        temporibus unde voluptas voluptatibus?
    </div>
    <div>Accusamus cupiditate debitis dolorem est explicabo maiores, necessitatibus nemo nesciunt praesentium
        voluptatem? Autem corporis dicta error ex facilis harum in iure, laboriosam magnam unde! Dicta ipsum libero
        rerum sunt vero.
    </div>
    <div>Dignissimos doloremque dolores enim ipsam libero magni minus nam pariatur quibusdam sit? Aliquam debitis ea
        enim ex excepturi exercitationem illum impedit minima nam perspiciatis quae quas quo ratione, totam veniam.
    </div>
    <div>Aliquid blanditiis enim eum inventore, itaque iusto odio optio recusandae sint voluptas! Aspernatur commodi
        dolores eveniet, ex illum laborum nulla numquam odit optio praesentium qui tempore temporibus totam, ut vel?
    </div>
    <div>Ab accusamus ad corporis culpa cupiditate, deserunt distinctio ea est expedita facere facilis incidunt ipsam
        iste laudantium libero nostrum officiis optio pariatur quas qui quo, ratione saepe, sequi suscipit vel?
    </div>
    <div>Pariatur ratione saepe sed? Adipisci aliquam, atque blanditiis consequatur cumque eligendi eveniet fugit itaque
        libero magnam maiores nulla numquam pariatur praesentium quam recusandae reprehenderit temporibus tenetur
        veritatis vero voluptatem voluptatibus?
    </div>
    <div>Ab asperiores, assumenda blanditiis consectetur culpa, cupiditate dolore ducimus eligendi eos eum facilis
        laudantium magnam natus nisi officiis quia quidem repellat saepe, sequi voluptates? Accusantium ducimus harum
        quae suscipit vel!
    </div>
    <div>Accusantium assumenda aut culpa deleniti est fugiat labore laborum minima, molestias nostrum, obcaecati
        praesentium quis ullam veritatis voluptate. Adipisci commodi consectetur dicta dolor eaque facilis odit quas
        quibusdam ut voluptatem!
    </div>
    <div>Ab, cumque doloribus ducimus ex explicabo facere, facilis fugit nemo quaerat rem, reprehenderit tempora vel
        veritatis. Doloribus fugit inventore iusto molestiae, nisi perspiciatis praesentium quas quasi quidem soluta
        tempore, voluptas.
    </div>
    <div>Accusamus hic in magni nisi, nostrum nulla placeat possimus repellat ullam velit. Ab beatae deserunt, eos ex,
        exercitationem facere illum itaque mollitia non numquam reprehenderit sit sunt totam velit, voluptatum.
    </div>
    <div>Assumenda delectus fuga nisi nobis officiis, quia vero. Accusantium adipisci amet architecto at consectetur
        culpa debitis dolorum, eligendi ex exercitationem explicabo illum modi officiis possimus quo quos sapiente
        voluptate voluptatem.
    </div>
    <div>Autem blanditiis commodi debitis ducimus eum exercitationem fuga, iusto nostrum nulla obcaecati omnis quae,
        quas quisquam similique tempora. Accusamus aut consequatur explicabo laboriosam molestiae nesciunt nulla, rerum
        sed vel veritatis.
    </div>
    <div>Amet beatae, cum delectus, dicta dolore dolorum earum excepturi fuga in, inventore magnam modi perspiciatis
        quos rerum tempore vero voluptatibus. Aperiam, assumenda dicta in inventore molestiae nemo nulla obcaecati. Rem!
    </div>
    <div>Accusantium aliquid culpa dolor dolorem eaque eligendi expedita, fugit laudantium possimus ratione similique
        suscipit voluptas voluptatem. Debitis, earum error eveniet explicabo impedit labore nam necessitatibus neque
        nesciunt nulla placeat unde!
    </div>
    <div>Ad, animi, aspernatur dicta distinctio ducimus error eveniet ipsum iste nulla possimus quae repellat
        repellendus, saepe vitae voluptatum? Architecto, asperiores cupiditate dolorum ducimus iure labore laborum nam
        obcaecati optio similique.
    </div>
    <div>Alias autem beatae blanditiis cum delectus, dolor doloribus est, facere fugiat ipsum iste libero magnam maxime
        minus necessitatibus neque nobis nostrum quae, qui quo rem suscipit tempora tenetur voluptates voluptatum.
    </div>
    <div>Consequuntur delectus perspiciatis tempore! Aperiam blanditiis consequatur, cumque delectus deserunt dicta
        dignissimos doloremque ducimus excepturi fuga illo illum itaque labore mollitia nemo nobis optio porro, quasi
        rerum soluta vel voluptas.
    </div>
    <div>A accusamus alias aliquam aliquid architecto atque blanditiis culpa delectus, dolore dolorem dolorum eos esse
        ipsam iusto, laboriosam laudantium nulla numquam odio quos recusandae saepe sunt temporibus voluptatem? Earum,
        saepe.
    </div>
</div>

</body>
</html>